<template>
  <div class="WarehouseTransfersQuery">
    <div class="wtq-top">
      <div>
        <p>调入仓库</p>
        <el-input
          style="width: 60px; margin: 5px 10px 0 0"
          v-model="foldWarehouse"
          @blur="foldWarehouseBlur"
        ></el-input>
        <el-select v-model="foldWarehouseName" class="wd1" @change="queryNo">
          <el-option
            v-for="item in foldWarehouseList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>调拨序号</p>
        <el-input v-model="allotSequence" class="wd"></el-input>

        <p>款号</p>
        <el-input class="wd" v-model="kindsNumber"></el-input>
        <!-- <p>款号</p>
        <el-cascader
          style="width:160px;height:30px;"
          v-model="kindsNumber"
          :options="kindsNumberList"
          :props="props"
          collapse-tags
          clearable>
        </el-cascader> -->

        <p>品牌</p>
        <el-input v-model="brandedName" class="wd"></el-input>

        <p>日期</p>
        <el-date-picker
          unlink-panels
          v-model="timeData"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>

      <div>
        <p>调出仓库</p>
        <el-input
          v-model="calloutWarehouse"
          style="width: 60px; margin: 5px 10px 0 0"
          @blur="calloutWarehouseBlur"
        ></el-input>
        <el-select
          v-model="calloutWarehouseName"
          class="wd1"
          @change="queryNo1"
        >
          <el-option
            v-for="item in calloutWarehouseList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>单据确认</p>
        <el-select v-model="affirm" class="wd">
          <el-option
            v-for="item in affirmList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>数量</p>
        <el-input class="wd" disabled></el-input>
        <p>款号</p>
        <el-input class="wd" disabled></el-input>
      </div>
    </div>

    <div class="wtq-btn">
      <el-button type="primary" icon="el-icon-search" @click="query"
        >查询</el-button
      >
      <el-button @click="confirm" :disabled="Dis" icon="el-icon-circle-check"
        >确认</el-button
      >
      <el-button @click="pwd" :disabled="Dis1" icon="el-icon-edit-outline"
        >改单</el-button
      >
      <el-button
        @click="AddOd"
        :disabled="Dis1 || Dis2"
        icon="el-icon-document-add"
        >补单</el-button
      >
      <el-button
        @click="
          () => {
            this.print1 = 'block'
          }
        "
        icon="el-icon-printer"
        >列印</el-button
      >
      <el-button @click="dele" :disabled="Dis1" icon="el-icon-delete"
        >删除</el-button
      >
    </div>

    <div class="wtq-tab">
      <div>
        <el-table
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          id="tip"
          :data="tabData"
          height="64vh"
          highlight-current-row
          @row-click="rowClick"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50px">
          </el-table-column>
          <el-table-column
            prop="allotSequence"
            label="调拨序号"
            width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="foldWarehouse"
            label="调入仓库"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="foldWarehouseName"
            label="调入仓名"
            width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="calloutWarehouse"
            label="调出仓库"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="affirm" label="确认" width="50">
          </el-table-column>
          <el-table-column prop="allotTime" label="调拨日期" width="140">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            show-overflow-tooltip
            width="160"
          >
          </el-table-column>
        </el-table>

        <!-- 分頁 -->
        <el-pagination
          small
          background
          ref="paginationRight"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>

      <div>
        <el-table
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          highlight-current-row
          id="tip1"
          height="64vh"
          :data="tab1Data"
          style="width: 100%"
        >
          <el-table-column prop="allotSequence" label="调拨序号" width="140">
          </el-table-column>
          <el-table-column prop="receiptsNumber" label="单号">
          </el-table-column>
          <el-table-column
            prop="foldWarehouse"
            label="调入仓库"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="foldWarehouseName"
            label="调入仓名"
            width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="calloutWarehouse"
            label="调出仓库"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="calloutWarehouseName"
            label="调出仓名"
            width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="kindsNumber" label="款号" width="130">
          </el-table-column>
          <el-table-column prop="number" label="数量" width="50">
          </el-table-column>
          <el-table-column prop="allotTime" label="调拨日期" width="130">
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          ref="paginationRight"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit1"
          :page-count="pagesNum1"
          :total="dataLen1"
          @current-change="handleCurrentChange1"
          @size-change="handleSizeChange1"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 列印 -->
    <pr-int
      class="print"
      :style="{ display: print1 }"
      @closeprint="
        () => {
          this.print1 = 'none'
        }
      "
    >
    </pr-int>

    <!-- 改单密码验证 -->
    <verify-password
      :style="{ display: showpwd }"
      @closepwd="closepwd"
      @showRevision="showRevision"
    >
    </verify-password>

    <change-od
      :style="{ display: ChangeOd }"
      @closeChange="closeChange"
      @saveChange="saveChange"
      @InsufficientList="InsufficientList"
      @odChange="odChange"
      :showData="this.details1"
      :warehouseData="this.calloutWarehouseList"
    >
    </change-od>

    <!-- 补单 -->
    <!-- <sup-od
      v-if="isShowBudanDialog"
      @saveSporder="saveSporder"
      :warehouseData="this.calloutWarehouseList"
      @inpNumChange="
        () => {
          this.inpList = this.getInput()
        }
      "
      :showData="this.details1"
      :tab1Data="this.tab1Data"
      :kindList="this.kindList"
      :kindList1="this.kindList1"
      :remarks="this.remarks"
    >
    </sup-od> -->
    <sup-od
      :style="{ display: showsupOd }"
      @closeSporder="
        () => {
          this.showsupOd = 'none'
        }
      "
      @saveSporder="saveSporder"
      :warehouseData="this.calloutWarehouseList"
      @inpNumChange="
        () => {
          this.inpList = this.getInput()
        }
      "
      :showData="this.details1"
      :tab1Data="this.tab1Data"
      :kindList="this.kindList"
      :kindList1="this.kindList1"
      :remarks="this.remarks"
    >
    </sup-od>

    <foot-view class="footView">
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <el-checkbox-group v-model="selectHeaderList">
            <el-checkbox
              v-for="i in headerList"
              :label="i.value"
              :key="i.value"
              style="margin-bottom: 7px"
            ></el-checkbox>
          </el-checkbox-group>
          <i slot="reference" class="el-icon-date"> 表头配置</i>
        </el-popover>
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import supOd from '../WarehouseTransfers/childComp/supOd'
import verifyPassword from '../../../components/VerifyPassword'
import changeOd from './childComp/ChangeOd'
import prInt from '../../../components/PrInt'
import enterUp from '../../../components/mixins/enterUp'
import { getWarehouse } from '../../../network/warehouse'
import {
  getWarehouseTab,
  putWarehouse,
  AddWarehouse,
  confirmWarehouse,
  getANumber
} from '../../../network/manufacturer'
import today from '../../../components/mixins/today'
export default {
  name: 'warehouse_transfers_query',
  mixins: [enterUp, today],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.inpList = this.getInput()
    // this.timeData = [this.getLastWeek(),this.getNowTime()]
    //仓库
    getWarehouse().then((res) => {
      let list = res.data.data
      list.forEach((e) => {
        this.foldWarehouseList.push({ value: e.no, label: e.name })
        this.calloutWarehouseList.push({ value: e.no, label: e.name }) //调出
        if (e.isMainWarehouse) {
          this.foldWarehouse = e.no
          this.foldWarehouseName = e.name
        }
      })
    })

    //款号
    // getANumber().then(res=>{
    //   console.log(res.data)
    //   let isExist = 0
    //   res.data.data.forEach(e => {
    //     // this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber})
    //     if (!this.kindsNumberList.length) {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber,children:[{value:e.kindsNumber,label:e.kindsNumber}]})
    //     }
    //     for (let i of this.kindsNumberList) {
    //       if (e.styleNumber == i.value) {
    //         i.children.push({value:e.kindsNumber,label:e.kindsNumber})
    //         isExist = 1
    //         break
    //       }
    //       isExist = 0
    //     }
    //     if (!isExist) {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber,children:[{value:e.kindsNumber,label:e.kindsNumber}]})
    //     }
    //   })
    // });
  },
  data() {
    return {
      //
      isShowBudanDialog: false,
      Dis: false,
      Dis1: false,
      Dis2: false,
      selectHeaderList: [],
      headerList: [],
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      allData1: [],
      allData: [],
      // 总数据条数
      dataLen1: 0,
      // 总页码
      pagesNum1: 0,
      // 分页条数
      limit1: 20,
      // 当前页码
      currentPage1: 1,

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,

      // props: { multiple: true },
      inpList: [],
      print1: 'none',
      showpwd: 'none',
      ChangeOd: 'none',
      showsupOd: 'none',
      affirmList: [
        { label: '全部', value: '全部' },
        { label: '确认', value: '确认' },
        { label: '未确认', value: '未确认' }
      ],
      tabData: [],
      tab1Data: [],
      foldWarehouse: '',
      foldWarehouseName: '',
      foldWarehouseList: [],
      allotSequence: '',
      // Sequence:'',
      kindsNumber: '',
      kindsNumberList: [],
      brandedName: '',
      timeData: [],
      calloutWarehouse: '',
      calloutWarehouseName: '',
      calloutWarehouseList: [],
      affirm: '全部',
      affirmListL: [],
      details: [],
      details1: {},
      kindList: [],
      kindList1: [],
      remarks: '',
      Insufficient: []
    }
  },
  components: {
    footView,
    verifyPassword,
    changeOd,
    prInt,
    supOd
  },
  methods: {
    //左表当前页
    handleCurrentChange(val) {
      console.log(val)
      this.currentPage = val
      this.query()
    },
    //选择每页多少条
    handleSizeChange(val) {
      this.limit = val
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this.query()
    },
    //右表当前页
    handleCurrentChange1(val) {
      this.currentPage1 = val
      this.tab1Data = this.allData1.slice(
        (this.currentPage1 - 1) * this.limit1,
        this.currentPage1 * this.limit1
      )
    },
    handleSizeChange1(val) {
      this.limit1 = val
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
      this.tab1Data = this.allData1.slice(
        (this.currentPage1 - 1) * this.limit1,
        this.currentPage1 * this.limit1
      )
      console.log(this.tab1Data)
    },

    dele() {
      if (this.details == '') {
        return
      }
      // for(let a of this.tabData){
      //   if (a.allotSequence == this.allotSequence && a.affirm == 1){
      //     this.$message({
      //       type: 'warning',
      //       offset:400,
      //       message: '此单已确认，不可进行删除操作'
      //     });
      //     return
      //   }
      // }
      this.$router.push({
        path: '/warhous_delete',
        query: { type: 3, sequenceid: this.allotSequence },
        key: '$route.fullPath'
      })
      this.$store.commit('addNav', {
        label: '仓库调拨查询删单',
        name: 'warhous_delete'
      })
    },
    //确认按钮
    confirm() {
      // for(let x of this.details){
      //   if(x.affirm == 1){
      //     this.$message({
      //       type: 'info',
      //       message: '此单已确认!'
      //     });
      //   return
      //   }
      // };
      if (this.allotSequence == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选中一条数据进行确认!'
        })
        return
      }
      this.$confirm(
        '确认后不可对此单进行改单,删单和补单操作 是否确认？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        confirmWarehouse({ allotSequence: this.allotSequence }).then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            for (let l of this.tabData) {
              if (this.allotSequence == l.allotSequence) {
                l.affirm = 1
              }
            }
            this.$message({
              type: 'success',
              message: '确认成功!'
            })
          } else {
            this.$message.error('确认失败')
          }
        })
      })
    },
    AddOd() {
      // for(let a of this.tabData){
      //   if (a.allotSequence == this.allotSequence && a.affirm == 1){
      //     this.$message({
      //       type: 'warning',
      //       offset:400,
      //       message: '此单已确认，不可进行改单和补单操作'
      //     });
      //     return
      //   }
      // }
      if (this.details == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选中左表进行补单'
        })
        return
      }
      this.showsupOd = 'block'
      // this.isShowBudanDialog = true
    },

    rowClick(e) {
      // console.log(e)
      if (e.warehouseAllotInfoOneList[0].dataSource == 0) {
        this.Dis2 = true
      } else {
        this.Dis2 = false
      }

      if (e.affirm == 1) {
        this.Dis = true
        this.Dis1 = true
      } else {
        this.Dis = false
        this.Dis1 = false
      }
      console.log(e, e.remark)
      this.remarks = e.remark
      this.kindList = []
      this.kindList1 = []
      // this.tab1Data = e.dataList
      for (let j in e.warehouseAllotInfoOneList) {
        //按倉庫編號 找倉庫名稱
        for (let k in this.foldWarehouseList) {
          if (
            e.warehouseAllotInfoOneList[j].foldWarehouse ==
            this.foldWarehouseList[k].value
          ) {
            console.log(11)
            e.warehouseAllotInfoOneList[j].foldWarehouseName =
              this.foldWarehouseList[k].label
          }
        }
      }

      for (let j in e.warehouseAllotInfoOneList) {
        //按倉庫編號 找倉庫名稱
        for (let k in this.foldWarehouseList) {
          if (
            e.warehouseAllotInfoOneList[j].calloutWarehouse ==
            this.foldWarehouseList[k].value
          ) {
            e.warehouseAllotInfoOneList[j].calloutWarehouseName =
              this.foldWarehouseList[k].label
          }
        }
      }

      for (let l of e.warehouseAllotInfoOneList) {
        if (e.allotSequence == l.allotSequence) {
          this.kindList.push(l.kindsNumber)
          this.kindList1.push({ num: l.number, kind: l.kindsNumber })
        }
      }

      this.allData1 = e.warehouseAllotInfoOneList
      this.dataLen1 = this.allData1.length
      this.tab1Data = this.allData1.slice(
        (this.currentPage1 - 1) * this.limit1,
        this.currentPage1 * this.limit1
      )
      // 点击不能回显上去页面
      // this.allotSequence = e.allotSequence
      this.details = [e]
      this.details1 = e
      console.log(this.details)
    },
    /*  */
    InsufficientList(data) {
      this.Insufficient = data
    },
    //改单保存
    saveChange(data) {
      console.log(data)
      var kindsNumberMap = {}
      data.forEach((e) => {
        kindsNumberMap[e.kindsNumber] = String(e.number)
      })
      // console.log(kindsNumberMap)
      for (let v in data) {
        data[v]['kindsNumberMap'] = kindsNumberMap
        data[v]['rfidList'] = []
      }

      putWarehouse(data[0]).then((res) => {
        console.log(res.data)
        this.ChangeOd = 'none'
        if (res.data.code == 200) {
          if (this.Insufficient != '') {
            this.$alert(`${this.Insufficient} 库存不足,其余货号改单成功`, '', {
              confirmButtonText: '确定'
            })
          } else {
            this.$message({
              type: 'success',
              offset: 400,
              message: '改单保存成功'
            })
          }
          this.query()
        } else {
          this.$message.error({
            message: '改单保存失败'
          })
        }
      })
    },
    odChange(data) {
      putWarehouse(data).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '改单保存成功'
          })
          // this.query()
        } else {
          this.$message.error({
            message: '改单保存失败'
          })
        }
      })
    },
    // 补单保存
    saveSporder(data) {
      // AddWarehouse(data).then((res) => {
      //   console.log(res.data)
      //   // 不要关闭对话框
      //   // this.showsupOd = 'none'

      //   if (res.data.code == 200) {
      //     this.$message({
      //       type: 'success',
      //       message: '补单保存成功'
      //     })
      this.query()
      //   } else {
      //     this.$message.error({
      //       message: '补单保存失败'
      //     })
      //   }
      // })
    },
    //调拨查询

    query() {
      console.log(this.timeData)
      this.tab1Data = []
      let params = {
        foldWarehouse: this.foldWarehouse,
        // 调拨序号参数字段
        allotSequence: this.allotSequence,
        kindsNumber: this.kindsNumber,
        brandedName: this.brandedName,
        startTime:
          this.timeData == null || this.timeData == '' ? '' : this.timeData[0],
        endTime:
          this.timeData == null || this.timeData == '' ? '' : this.timeData[1],
        calloutWarehouse: this.calloutWarehouse,
        affirm: this.affirm == '全部' ? -1 : this.affirm == '确认' ? 1 : 0,
        limit: this.limit,
        page: this.currentPage
      }
      console.log(params)
      getWarehouseTab(params).then((res) => {
        //按倉庫編號 對應的倉庫名稱
        console.log(res)
        for (let j in res.data.data) {
          for (let k in this.foldWarehouseList) {
            if (
              res.data.data[j].foldWarehouse == this.foldWarehouseList[k].value
            ) {
              res.data.data[j].foldWarehouseName =
                this.foldWarehouseList[k].label
            }
          }
        }
        this.allData = res.data.data
        console.log(this.allData)
        this.dataLen = this.allData.length
        this.tabData = this.allData.slice(
          (this.currentPage - 1) * this.limit,
          this.currentPage * this.limit
        )
      })
    },

    pwd() {
      console.log(this.details)
      // for(let n of this.tabData){
      //   if(n.allotSequence == this.allotSequence && n.affirm == 1){
      //     this.$message({
      //       type: 'warning',
      //       offset:400,
      //       message: '此单已确认，不可进行改单和补单操作'
      //     });
      //     return
      //   }
      // };
      if (this.details == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请点击左表进行改单'
        })
        return
      }
      this.showpwd = 'block'
    },
    closepwd() {
      this.showpwd = 'none'
    },
    showRevision() {
      this.showpwd = 'none'
      this.ChangeOd = 'block'
    },
    closeChange() {
      this.ChangeOd = 'none'
    },

    queryNo() {
      for (let c of this.foldWarehouseList) {
        if (this.foldWarehouseName == c.value) {
          this.foldWarehouse = c.value
          if (this.foldWarehouse == this.calloutWarehouse) {
            this.$message({
              type: 'warning',
              offset: 400,
              message: '调入仓库与调出仓库不能为同一个'
            })
            this.foldWarehouse = ''
            this.foldWarehouseName = ''
          }
          return
        }
      }
    },
    queryNo1() {
      for (let b of this.calloutWarehouseList) {
        if (this.calloutWarehouseName == b.value) {
          this.calloutWarehouse = b.value
          if (this.calloutWarehouse == this.foldWarehouse) {
            this.$message({
              type: 'warning',
              offset: 400,
              message: '调入仓库与调出仓库不能为同一个'
            })
            this.calloutWarehouse = ''
            this.calloutWarehouseName = ''
          }
          return
        }
      }
    },
    // 调入仓库失去焦点
    foldWarehouseBlur() {
      if (this.foldWarehouse != '') {
        for (const i of this.foldWarehouseList) {
          if (this.foldWarehouse == i.value) {
            this.foldWarehouseName = i.label
            return
          }
        }
        this.$message({
          type: 'warning',
          message: '无此仓库编号'
        })
        this.foldWarehouse = ''
        this.foldWarehouseName = ''
      } else {
        this.foldWarehouseName = ''
      }
    },
    //调出仓库编号失去焦点
    calloutWarehouseBlur() {
      if (this.calloutWarehouse != '') {
        for (const i of this.calloutWarehouseList) {
          if (this.calloutWarehouse == i.value) {
            this.calloutWarehouseName = i.label
            return
          }
        }
        this.$message({
          type: 'warning',
          message: '无此仓库编号'
        })
        this.calloutWarehouse = ''
        this.calloutWarehouseName = ''
      } else {
        this.calloutWarehouseName = ''
      }
    }
  },
  watch: {
    allotSequence(a, b) {
      if (a) {
        this.allotSequence = a.toUpperCase().trim()
      }
    },
    kindsNumber(a, b) {
      if (a) {
        this.kindsNumber = a.toUpperCase().trim()
      }
    },
    brandedName(a, b) {
      if (a) {
        this.brandedName = a.toUpperCase().trim()
      }
    }
  }
}
</script>

<style scoped>
.WarehouseTransfersQuery {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.wtq-top {
  padding: 15px 0;
  border-bottom: 2px solid #f4f4f4;
}
.wtq-top div {
  display: flex;
}
.wtq-top > div:nth-child(2) {
  margin-top: 10px;
}
.wtq-top div p:first-child {
  margin: 8px 6px 0 0;
  display: inline-block;
  white-space: nowrap;
}
.wtq-top div p:not(:first-child) {
  margin: 8px 6px 0 12px;
  display: inline-block;
  white-space: nowrap;
}
.wd {
  width: 160px;
  margin-top: 5px;
}
.wd1 {
  width: 100px;
  margin-top: 5px;
}
.wd2 {
  width: 80px;
}
.wtq-btn {
  padding: 15px 0;
}
.wtq-tab {
  display: flex;
}
.wtq-tab > div:first-child {
  width: 50%;
  padding-right: 1%;
  text-align: end;
}
.wtq-tab > div:nth-child(2) {
  width: 50%;
  padding-left: 1%;
  border-left: 2px solid #f4f4f4;
  text-align: end;
}
.print {
  top: 19%;
  left: 21%;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
</style>

<style>
.WarehouseTransfersQuery .wtq-top .el-input__inner {
  height: 30px;
}
.WarehouseTransfersQuery .wtq-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.WarehouseTransfersQuery .wtq-top .el-date-editor .el-range-separator {
  width: 8%;
  line-height: 23px;
}
.WarehouseTransfersQuery .wtq-top .el-range-editor.el-input__inner {
  margin-top: 5px;
}
.WarehouseTransfersQuery .wtq-top .el-date-editor .el-range__close-icon {
  line-height: 25px;
}
.WarehouseTransfersQuery .wtq-top .el-input__icon {
  line-height: 30px;
}
.WarehouseTransfersQuery
  .wtq-tab
  .el-pagination
  .el-select
  .el-input
  .el-input__inner {
  width: 100px;
  height: 30px;
}
.WarehouseTransfersQuery .wtq-tab .el-pagination--small .el-pagination__editor,
.el-pagination--small .el-pagination__editor.el-input .el-input__inner {
  width: 50px;
  height: 30px;
  margin-right: 5px;
}
.WarehouseTransfersQuery
  .wtq-tab
  .el-pagination.is-background.el-pagination--small
  .btn-next,
.el-pagination.is-background.el-pagination--small .btn-prev,
.el-pagination.is-background.el-pagination--small .el-pager li {
  height: 30px;
  width: 30px;
}
.WarehouseTransfersQuery .wtq-tab .el-pagination--small button,
.el-pagination--small span:not([class*='suffix']) {
  margin-right: 10px;
}
</style>
